
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script type="text/javascript" src="../javascripts/jquery.js"></script>
	<script type="text/javascript" src="../javascripts/chili-1.7.pack.js"></script>
	
	<script type="text/javascript" src="../javascripts/jquery.easing.js"></script>
	<script type="text/javascript" src="../javascripts/jquery.dimensions.js"></script>
	<script type="text/javascript" src="../javascripts/jquery.accordion.js"></script>
    
	<script type="text/javascript" src="../javascripts/validation.js"></script>
    <script type="text/javascript" src="../javascripts/jquery-ui-1.7.2.custom.min.js"> </script>
 
    <script type="text/javascript" src="../javascripts/jquery.lightbox-0.5.pack.js"></script>

    <script type="text/javascript" src="../javascripts/prompt.js"></script>
	<script type="text/javascript" src="../javascripts/prompt1.js"></script>
    <script type="text/javascript" src="../javascripts/tiny_mce/tiny_mce.js"></script>
    
    <script type="text/javascript" src="../javascripts/jquery.simplemodal.js"></script>
	<script type="text/javascript" src="../javascripts/prompt1.js"></script>
    <script type="text/javascript" src="../javascripts/tiny_mce/tiny_mce.js"></script>
     <script type="text/javascript" src="../javascripts/jquery.timePicker.min.js"></script>
      <script type="text/javascript" src="../javascripts/jquery.timePicker.js"></script>

	<link type="text/css" href="../css/demo.css" rel="stylesheet" />
    <link type="text/css" href="../css/basic.css" rel="stylesheet" />
    <style>
	div.time-picker {
  position: absolute;
  height: 191px;
  width:4em; /* needed for IE */
  overflow: auto;
  background: #fff;
  border: 1px solid #aaa;
  z-index: 99;
  margin: 0;
}
div.time-picker-12hours {
  width:6em; /* needed for IE */
}

div.time-picker ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div.time-picker li {
  cursor: pointer;
  height: 10px;
  font: 12px/1 Helvetica, Arial, sans-serif;
  padding: 4px 3px;
}
div.time-picker li.selected {
  background: #0063CE;
  color: #fff;
}
	</style>
	<script type="text/javascript">
		$(function(){
				$('div#hide').hide();
				$('#sam').click(function(){
						$('div#hide').fadeIn(800).slideDown('slow');
				});
				$('#close').click(function(){
						$('div#hide').fadeIn(800).slideUp('slow').hide;
				});
				
			});
	 $(function() {
  
    $("#time3, #time4").timePicker();
        
    // Store time used by duration.
    var oldTime = $.timePicker("#time3").getTime();
    
    // Keep the duration between the two inputs.
    $("#time3").change(function() {
      if ($("#time4").val()) { // Only update when second input has a value.
        // Calculate duration.
        var duration = ($.timePicker("#time4").getTime() - oldTime);
        var time = $.timePicker("#time3").getTime();
        // Calculate and update the time in the second input.
        $.timePicker("#time4").setTime(new Date(new Date(time.getTime() + duration)));
        oldTime = time;
      }
    });
    // Validate.
    $("#time4").change(function() {
      if($.timePicker("#time3").getTime() > $.timePicker(this).getTime()) {
        $(this).addClass("error");
      }
      else {
        $(this).removeClass("error");
      }
    });
    
  });
			
	</script>
<title>Untitled Document</title>
</head>

<body>
<input type="text" id="time3" size="10" value="08:00" /> <input type="text" id="time4" size="10" value="09:00" />
<a href="#" id="sam"> try</a>
<a href="#" id="close">close</a>

<div id="hide"> success</div>
</body>
</html>